<ng-container *ngIf="displayInCard">
  <mat-toolbar >
    <mat-toolbar-row fxLayout="row" fxLayoutAlign="start center">
      <div fxLayout="row" fxLayoutAlign="center center" class="cursor-pointer" (click)="goBackToDatasourceList()"><mat-icon class="push-right">arrow_back</mat-icon>{{datasource.title}}</div>
    </mat-toolbar-row>
  </mat-toolbar>
  <mat-card>
  <ng-container [ngTemplateOutlet]="browserTemplate">
  </ng-container>
  </mat-card>
</ng-container>


<ng-container [ngTemplateOutlet]="browserTemplate" *ngIf="!displayInCard">
</ng-container>


<ng-template #browserTemplate>
  <div fxLayout="row" fxLayoutAlign="start center" class="pad-left-sm pad-right-sm">
    <div *ngIf="!searchBox.searchVisible" class="push-left-sm">
      <ol class="mat-title">
        <li>
          <div>
          <span *ngFor="let node of pathNodes; last as isLast; first as isFirst;">
            <a *ngIf="isFirst" matRipple class="cursor-pointer" (click)="breadcrumbClick(node)">
               {{datasource.title}}
            </a>
            <a *ngIf="!isFirst" matRipple class="cursor-pointer" (click)="breadcrumbClick(node)">
              {{node.displayName}}
            </a>
            <span *ngIf="!isLast">/</span>
          </span>
          </div>
          <div *ngIf="showSelectionSummary && selectedTotal() > 0" class="selected-items">
            {{selectedHere()}} item(s) selected here,
            <a class="mat-accent" (click)="openSelectionDialog()" class="cursor-pointer">{{selectedTotal()}} in total</a>
          </div>
        </li>
      </ol>
    </div>
    <td-search-box #searchBox backIcon="arrow_back" class="push-right-sm" placeholder="Search here" (searchDebounce)="search($event)" fxFlex></td-search-box>

  </div>
  <mat-divider></mat-divider>

  <div *tdLoading="'BrowserComponent.tableLoader'; mode:'indeterminate'; type:'circle'; strategy:'overlay'; color:'accent'">

    <td-data-table *ngIf="tableTemplate == 'SelectionTableTemplate'"
                   #dataTable
                   [data]="filteredFiles"
                   [columns]="columns"
                   [selectable]="false"
                   [clickable]="true"
                   [multiple]="multiple"
                   [sortable]="true"
                   [sortBy]="sortBy"
                   [(ngModel)]="selected"
                   [sortOrder]="sortOrder"
                   (rowClick)="rowSelected($event)"
                   (sortChange)="sort($event)"
                   style="height:42vh">

      <ng-template tdDataTableTemplate="selection" let-value="value" let-column="column" let-row="row">
      <span>
        <mat-checkbox [checked]="isChildSelected(row.name)"
                      [disabled]="isSelectChildDisabled(row.name)"
                      (change)="onToggleChild($event, row)" *ngIf="!isSelectChildDisabled(row.name)"></mat-checkbox>
        <td-notification-count *ngIf="numberOfSelectedDescendants(row.name) > 0" color="accent" [notifications]="numberOfSelectedDescendants(row.name)"
                               [positionX]="after" [positionY]="bottom" style="margin-top: -15px; margin-left: -3px; margin-right: -30px; min-height: 0; min-width: 0"></td-notification-count>
       </span>
      </ng-template>

      <ng-template tdDataTableTemplate="type" let-value="value" let-column="column" let-row="row">
        <span class="cell-icon"><ng-md-icon [icon]="row.getIcon()"></ng-md-icon></span>
      </ng-template>


    </td-data-table>

    <div class="md-padding" *ngIf="dataTable && !dataTable.hasData" layout="row" layout-align="center center">
      <h3>No results to display.</h3>
    </div>

    <td-data-table *ngIf="tableTemplate == 'NameLinkTableTemplate'"
                   #catalogDataTable
                   [data]="filteredFiles"
                   [columns]="columns"
                   [selectable]="false"
                   [clickable]="true"
                   [multiple]="multiple"
                   [sortable]="true"
                   [sortBy]="sortBy"
                   [(ngModel)]="selected"
                   [sortOrder]="sortOrder"
                   (rowClick)="rowSelected($event)"
                   (sortChange)="sort($event)"
                   style="height:60vh">

      <ng-template tdDataTableTemplate="type" let-value="value" let-column="column" let-row="row">
        <span class="cell-icon">
          <ng-md-icon [icon]="row.getIcon()"></ng-md-icon>
        </span>
      </ng-template>

      <ng-template tdDataTableTemplate="name" let-value="value" let-column="column" let-row="row">
        <span *ngIf="!isSelectChildDisabled(row.name)"><a href="javascript:void(0);" (click)="preview(row,column,value)"> {{value}}</a></span>
        <span *ngIf="isSelectChildDisabled(row.name)">{{value}}</span>
      </ng-template>



    </td-data-table>

    <div class="md-padding" *ngIf="catalogDataTable && !catalogDataTable.hasData" layout="row" layout-align="center center">
      <h3>No results to display.</h3>
    </div>

    <td-paging-bar #pagingBar [pageSize]="pageSize" [total]="filteredTotal" (change)="page($event)">
      <mat-checkbox labelPosition="before" [(ngModel)]="hideInternalTables" *ngIf="showHideInternalOption" (change)="filter()">Hide internal tables?</mat-checkbox>
      <span fxFlex=""></span>
      <span hide-xs>Rows per page:</span>
      <mat-select [style.width.px]="50" [(ngModel)]="pageSize">
        <mat-option *ngFor="let size of [50,100,200,500]" [value]="size">
          {{size}}
        </mat-option>
      </mat-select>
      {{pagingBar.range}} <span hide-xs>of {{pagingBar.total}}</span>
    </td-paging-bar>


  </div>
</ng-template>